<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>英雄</title>
		<link rel="stylesheet" href="./css/hero.css" />
		<link rel="stylesheet" href="./css/comm-v1.css" />
		<link rel="stylesheet" href="./css/index.css" />
	</head>

	<body>
		<div class="herolist-box">
			<div class="clearfix herolist-types">
				<ul class="types-left">
					<li>综合</li>
					<li>定位</li>
				</ul>
				<ul class="clearfix types-ms">
					<li data-ptype="10">
						<span class="ms-radio"><i class="i"></i></span>
						<label>本周免费</label>
					</li>
					<li data-ptype="11">
						<span class="ms-radio"><i class="i"></i></span>
						<label>新手推荐</label>
					</li>
				</ul>
				<ul class="clearfix types-ms">
					<li class="current" data-type="0">
						<span class="ms-radio"><i class="i"></i></span>
						<label>全部</label>
					</li>
					<li data-type="3">
						<span class="ms-radio"><i class="i"></i></span>
						<label>坦克</label>
					</li>
					<li data-type="1">
						<span class="ms-radio"><i class="i"></i></span>
						<label>战士</label>
					</li>
					<li data-type="4">
						<span class="ms-radio"><i class="i"></i></span>
						<label>刺客</label>
					</li>
					<li data-type="2">
						<span class="ms-radio"><i class="i"></i></span>
						<label>法师</label>
					</li>
					<li data-type="5">
						<span class="ms-radio"><i class="i"></i></span>
						<label>射手</label>
					</li>
					<li data-type="6">
						<span class="ms-radio"><i class="i"></i></span>
						<label>辅助</label>
					</li>
				</ul>
			</div>
			<div class="herolist-content">
				<ul class="herolist clearfix">
					<!-- <li >
          <a href="#" target="_blank"><img src="" width="91" height="91" alt="曜" />曜</a>
        </li> -->
				</ul>
			</div>
		</div>

		<!-- 数组比较多，放在了外接的js文件中 -->
		<script src="./hero.js"></script>
		<script>
			// 1. 渲染函数 render
			function render(arr) {
				const strArr = arr.map(ele => {
					const { icon, name } = ele
					return `
        <li >
          <a href="#" target="_blank"><img src="${icon}" width="91" height="91" alt="${name}" />${name}</a>
        </li> 
        `
				})
				// 渲染
				document.querySelector(".herolist").innerHTML = strArr.join("")
			}
			render(heroArr)

			// 2. 点击可以进行筛选 利用循环绑定多个事件（注意这里li里面包含多个元素，事件委托比较麻烦）
			const lis = document.querySelectorAll(".types-ms>li")
			lis.forEach(ele => {
				// 循环绑定事件
				ele.addEventListener("click", function () {
					// 排他思想，当前高亮
					document.querySelector("li.current").classList.remove("current")
					this.classList.add("current")

					// 筛选页面
					// 初始值为总数组
					/* let arr = heroArr
					// console.log(this.dataset.ptype)  得到当前元素的自定义属性值
					// 点击时候，利用当前自定属性值到数组里面筛选符合条件的
					arr = heroArr.filter(ele => ele.pay_type === +this.dataset.ptype || ele.hero_type === +this.dataset.type)
					render(arr) */
				})
			})
		</script>
		<script src="./index.js"></script>
	</body>
</html>
